<template>
  <view class="content">
    <view class="form-container">
      <input class="input-field" v-model="to" placeholder="请输入收件人邮箱" />
      <input class="input-field" v-model="subject" placeholder="请输入邮件主题" />
      <textarea class="textarea-field" v-model="content" placeholder="请输入邮件正文" />
      <button class="btn-send" @click="sendMail">发送邮件</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      to: '', // 收件人邮箱
      subject: '', // 邮件主题
      content: '' // 邮件正文
    };
  },
  methods: {
    sendMail() {
      // 检查输入是否为空
      if (!this.to || !this.subject || !this.content) {
        uni.showToast({
          title: '请填写所有字段',
          icon: 'none'
        });
        return;
      }

      // 使用 uni.request 发送邮件请求
      uni.request({
        url: 'http://localhost:8081/api/chat/mail',
        method: 'POST',
        header: {
        'Content-Type': 'application/x-www-form-urlencoded' // 或 application/json
        },
        data: {
          to: this.to.trim(),
          subject: this.subject.trim(),
          content: this.content.trim()
        },
        success: (response) => {
          console.log('邮件发送成功:', response);
          uni.showToast({
            title: '邮件发送成功',
            icon: 'success'
          });
          // 清空表单
          this.to = '';
          this.subject = '';
          this.content = '';
        },
        fail: (error) => {
          console.error('邮件发送失败:', error);
          uni.showToast({
            title: '邮件发送失败，请稍后重试',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.form-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.input-field {
  width: 100%;
  height: 80rpx;
  margin-bottom: 20rpx;
  padding: 10rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
}

.textarea-field {
  width: 100%;
  height: 200rpx;
  margin-bottom: 20rpx;
  padding: 10rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
}

.btn-send {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: white;
  border-radius: 10rpx;
}
</style>